<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>签到活动</title>
    <script src="js/jquery-3.7.0.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/util.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div id="app">
    <div class="activity-detail">
        <h1 style="display: flex; justify-content: space-between; align-items: center;">
            {{ activity.activityName }}
            <button class="btn btn-primary" @click="goToActivityList">返回活动列表</button>
        </h1>
        <img :src="'activityImg/' + activity.activityHead" alt="活动图片" class="activity-image">
        <p><strong>社团名称：</strong>{{ club.clubName }}</p>
        <p><strong>活动内容：</strong>{{ activity.activityContent }}</p>
        <p><strong>活动地点：</strong>{{ activity.activityLocation }}</p>
        <p><strong>活动时间：</strong>{{ activity.startTime }} - {{ activity.endTime }}</p>
        <p><strong>活动分数：</strong>2 活动分</p>
        <p><strong>参与范围：</strong>全体学生</p>
        <p><strong>参与人数：</strong></p>
        <p><strong>参与人数限制：</strong>{{ activity.maxNumber }}</p>
        <p><strong>报名状态：</strong>{{ getRegistrationStatus(activity) }}</p>

        <h5>社团管理人员</h5>
        <div class="info">
            <div v-if="president">
                <img :src="'img/head/' + president.head" alt="社长头像" class="manager-image">
                <p><strong>社长姓名：</strong>{{ president.studentName }}</p>
            </div>
            <div v-for="admin in admins" :key="admin.studentId">
                <img :src="'img/head/' + admin.head" alt="管理员头像" class="manager-image">
                <p><strong>管理员姓名：</strong>{{ admin.studentName }}</p>
            </div>
        </div>
        <!-- 根据报名状态显示不同的按钮 -->
        <div class="button-container">
            <div class="verification-code-input">
                <input v-model="verificationCode" type="text" placeholder="请输入活动验证码" class="form-control">
            </div>
            <button class="btn" :class="signButtonClass" :disabled="signButtonDisabled" @click="verifyAndSign">签到</button>
        </div>

        <!-- 评论区域 -->
        <div v-if="isActivityEnded" class="comments-section">
            <h5>评论</h5>

            <div v-for="(comment, index) in paginatedComments" :key="comment.commentId" class="comment">
                <img :src="'img/head/' + paginatedStudents[index].head" alt="评论人头像" class="comment-image">
                <div class="comment-details">
                    <p><strong>{{ paginatedStudents[index].studentName }}</strong>: {{ comment.commentContent }}</p>
                    <div class="comment-meta">
                        <div class="comment-score">评分: {{ comment.commentGrade }} / 10</div>
                        <div class="comment-time">{{ comment.commentTime | formatDate }}</div>
                    </div>
                </div>
            </div>
            <div class="pagination">
                <button class="btn " @click="prevPage" :disabled="currentPage === 1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
                </svg></button>
                <span style="position: relative;margin-top: 8px">第 {{ currentPage }} 页</span>
                <button class="btn " @click="nextPage" :disabled="currentPage === totalPages"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
                </svg></button>
            </div>
            <div class="add-comment">
                <input v-model="newComment.commentContent" type="text" placeholder="请输入评论内容" class="form-control">
                <div class="rating">
                    <span v-for="n in 10" :key="n" @click="setScore(n)" :class="{ 'star-active': n <= newComment.commentGrade }" class="star">&#9733;</span>
                </div>
                <button class="btn btn-primary" @click="verifyAndAddComment">提交评论</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<style>
    .verification-code-input {
        margin-top: 20px;
    }
    .activity-detail {
        width: 800px;
        margin: auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f9f9f9;
    }

    .activity-image {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
    }

    .manager-image {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .info {
        display: flex;
        /*自动换行*/
        flex-wrap: wrap;
        /*    间隔20px*/
        gap: 20px;
    }
    .button-container {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
    }
    .comments-section {
        margin-top: 20px;
    }

    .comment {
        display: flex;
        align-items: flex-start;
        margin-bottom: 10px;
    }

    .comment-image {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }

    .comment-details {
        flex: 1;
    }

    .comment-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.9em;
        color: #888;
        margin-top: 5px;
    }

    .comment-score {
        margin: 0;
    }

    .comment-time {
        margin: 0;
    }

    .add-comment {
        margin-top: 10px;
    }

    .rating {
        margin-top: 10px;
        cursor: pointer;
    }

    .star {
        font-size: 20px;
        color: #ccc;
        transition: color 0.2s;
    }

    .star-active {
        color: #f5c518;
    }
</style>
<script>
    $(function () {
        let activityId = getData().activityId;
        $.ajax({
            url: "activityinfo/" + activityId,
            type: "get",
            success: function (data) {
                new Vue({
                    el: "#app",
                    data: {
                        activity: data.activity,
                        club: data.club,
                        president: data.president,
                        admins: data.admins,
                        comments: [],
                        students: [],
                        newComment: { // 新评论
                            studentId: '', // 评论人ID
                            head: '', // 评论人头像
                            studentName: '', // 评论人名字
                            commentContent: '', // 评论内容
                            commentTime: '', // 评论时间
                            commentGrade: 5 // 默认评分
                        },
                        currentPage: 1, // 当前页码
                        commentsPerPage: 5, // 每页显示的评论数量
                        loginUser: {}, // 登录用户信息
                        isRegistered: false,
                        verificationCode: '', // 活动验证码
                        correctVerificationCode: '' // 假设正确的验证码，实际应从后端获取
                    },
                    created() {
                        this.fetchComments();
                        this.fetchVerificationCode(); // 新增获取验证码的方法
                    },
                    computed: {
                        // 计算属性，根据当前时间与活动时间判断是否可以报名
                        canRegister() {
                            const now = new Date();
                            const startTime = new Date(this.activity.startTime);
                            const oneDay = 24 * 60 * 60 * 1000;
                            return now < startTime - oneDay; // 如果当前时间早于活动开始时间前一天，则可以报名
                        },
                        // 计算属性，根据报名状态返回按钮的样式类
                        registrationButtonClass() {
                            return this.canRegister ? 'btn-success' : 'btn-secondary';
                        },
                        // 计算属性，根据报名状态返回按钮的禁用状态
                        registrationButtonDisabled() {
                            return !this.canRegister || this.isRegistered;
                        },
                        // 计算属性，判断活动是否结束
                        isActivityEnded() {
                            const now = new Date();
                            const endTime = new Date(this.activity.endTime);
                            return now > endTime;
                        },
                        // 计算属性，获取当前页的评论列表
                        paginatedComments() {
                            const start = (this.currentPage - 1) * this.commentsPerPage;
                            const end = start + this.commentsPerPage;
                            return this.comments.slice(start, end);
                        },
                        // 计算属性，获取当前页的 students 列表
                        paginatedStudents() {
                            const start = (this.currentPage - 1) * this.commentsPerPage;
                            const end = start + this.commentsPerPage;
                            return this.students.slice(start, end);
                        },
                        // 计算属性，获取总页数
                        totalPages() {
                            return Math.ceil(this.comments.length / this.commentsPerPage);
                        },
                        // 计算属性，根据签到状态返回按钮的样式类
                        signButtonClass() {
                            return this.getSignStatus(this.activity) === '进行中' ? 'btn-success' : 'btn-secondary';
                        },
                        // 计算属性，根据签到状态返回按钮的禁用状态
                        signButtonDisabled() {
                            return this.getSignStatus(this.activity) !== '进行中';
                        },
                    },
                    methods: {
                        // 获取报名状态
                        getRegistrationStatus(activity) {
                            const now = new Date();
                            const startTime = new Date(activity.startTime);
                            const endTime = new Date(activity.endTime);
                            const oneDay = 24 * 60 * 60 * 1000; // 一天

                            if (now < startTime - oneDay) {
                                return "未开始";
                            } else if (now >= startTime - oneDay && now < startTime) {
                                return "准备中";
                            } else if (now >= startTime && now <= endTime) {
                                return "进行中";
                            } else {
                                return "已结束";
                            }
                        },
                        // 获取签到状态
                        getSignStatus(activity) {
                            const now = new Date();
                            const startTime = new Date(activity.startTime);
                            const endTime = new Date(activity.endTime);
                            if (now < startTime) {
                                return "未开始";
                            } else if (now >= startTime && now <= endTime) {
                                return "进行中";
                            } else {
                                return "已结束";
                            }
                        },
                        // 签到
                        // 新增获取验证码的方法
                        fetchVerificationCode() {
                            $.ajax({
                                url: "activity/verificationCode/" + this.activity.activityId,
                                type: "get",
                                success: function (response) {
                                    this.correctVerificationCode = response.code;
                                }.bind(this)
                            });
                        },
                        // 签到
                        sign() {
                            if (this.getSignStatus(this.activity) === "进行中") {
                                if (this.verificationCode === this.correctVerificationCode) {
                                    // 验证码正确，执行签到操作
                                    if (this.loginUser && this.loginUser.studentId) {
                                        $.ajax({
                                            url: `activity/sign/${this.activity.activityId}/${this.loginUser.studentId}`,
                                            type: "post",
                                            success: function (response) {
                                                alert("签到成功！");
                                            }.bind(this)
                                        });
                                    }
                                } else {
                                    // 验证码错误
                                    alert("验证码错误！");
                                }
                            } else {
                                alert("签到时间已过或未开始！");
                            }
                        },
                        // 返回活动列表
                        goToActivityList() {
                            window.location.href = "activity.html";
                        },
                        // 添加评论
                        addComment() {
                            if (this.newComment.commentContent.trim() !== '') {
                                const commentData = {
                                    activityId: activityId,
                                    commentContent: this.newComment.commentContent,
                                    commentGrade: this.newComment.commentGrade
                                };
                                $.ajax({
                                    url: "activity/comment",
                                    type: "post",
                                    data: commentData,
                                    success: function (data) {
                                        // 刷新评论列表
                                        this.fetchComments();
                                        this.newComment.commentContent = ''; // 清空输入框
                                        this.newComment.commentGrade = 5; // 重置评分
                                    }.bind(this)
                                });
                            }
                        },
                        // 设置评分
                        setScore(score) {
                            this.newComment.commentGrade = score;
                        },
                        // 获取评论列表
                        fetchComments() {
                            $.ajax({
                                url: "activity/comments/" + activityId,
                                type: "get",
                                success: function (response) {
                                    this.comments = response.comments;
                                    this.students = response.students;
                                }.bind(this)
                            });
                        },
                        // 上一页
                        prevPage() {
                            if (this.currentPage > 1) {
                                this.currentPage--;
                            }
                        },
                        // 下一页
                        nextPage() {
                            if (this.currentPage < this.totalPages) {
                                this.currentPage++;
                            }
                        },
                        // 验证并签到
                        verifyAndSign() {
                            this.LoginVerify(() => {
                                this.sign();
                            });
                        },
                        // 验证并添加评论
                        verifyAndAddComment() {
                            this.LoginVerify(() => {
                                this.addComment();
                            });
                        },
                        LoginVerify(callback) {
                            $.ajax({
                                url: "loginVerify",
                                type: "get",
                                dataType: "json",
                                success: function (response) {
                                    if (response.state == 300) {
                                        alert(response.message);
                                        window.location.href = "login.html";
                                    } else {
                                        console.log(response.data.loginUser)
                                        // 登录验证成功，调用回调函数继续执行操作
                                        if (typeof callback === 'function') {
                                            callback();
                                        }
                                        // 将登录人的信息存储在 Vue 实例中
                                        this.loginUser = response.data.loginUser;
                                    }
                                }.bind(this) // 将当前上下文绑定到回调函数中
                            });
                        }
                    },
                });
            }
        });
    });

    function getData() {
        const params = new URLSearchParams(window.location.search);
        return {
            activityId: params.get("activityId")
        };
    }
</script>
